<template>
  <view class="dy-scroll-container">
    <dy-navbar title="环型进度条" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="基础用法" />
        <template slot="body">
          <view class="dy-pd-24 dy-justify-around" style="height::auto;">
            <dy-circle-progress width="200" :percent="40" />
            <dy-circle-progress width="200" :percent="40" text="hello,word" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="自定义颜色/字体大小" />
        <template slot="body">
          <view class="dy-pd-24 dy-justify-around" style="height::auto;">
            <dy-circle-progress width="200" :percent="40" inactive-color="#4169E1" />
            <dy-circle-progress width="200" :percent="40" text="hello,word" font-size="12px" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="自定义半径/进度条宽度" />
        <template slot="body">
          <view class="dy-pd-24 dy-justify-around" style="height::auto;">
            <dy-circle-progress width="250" :percent="40" />
            <dy-circle-progress width="250" :percent="40" border-width="30" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0" />
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CircleProgress'
}
</script>
